:host {
    .chart-wrap {
        box-sizing: border-box;
        background-color: #fff;
        padding: 24px;

        .chart-head {
            display: flex;
            align-items: center;
            
            .chart-title {
                font-size: 16px;
                color: #303133;
                font-weight: 600;
            }
        }

        .chart-box {
            box-sizing: border-box;
            width: 100%;
            padding-top: 20px;
        }
    }

    /* 统计card
    ---------------------------------------------------------------- */
    .static-card-wrap {
        box-sizing: border-box;
    }

    .quantity-card {
        box-sizing: border-box;
        border-radius: 5px 0 0 5px;

        &.card-ash {
            border-left: 3px solid rgba(144,147,153,.35);
        }
        &.card-green {
            border-left: 3px solid rgba(103,194,58,.35);
        }
        &.card-red {
            border-left: 3px solid rgba(245,108,108,.35);
        }
        &.card-yellow {
            border-left: 3px solid rgba(230,162,60,.35);
        }

        .quantity-name {
            font-size: 14px;
            color: rgba(0,0,0,.45);
            line-height: 22px;
            padding-top: 2px;
        }

        .quantity-number {
            font-size: 26px;
            color: rgba(0,0,0,.85);
            line-height: 32px;
            margin-top: 4px;

            .quantity-scale {
                font-size: 14px;
                line-height: 1;
                padding-left: 10px;
                color: #909399;
            }
        }
    }

    .no-data {
        padding: 40px 0;
    }
}